<!--  -->
<template>
  <div class="chartDiv" :id="'chartDiv' + index">
    <div :id="'m_CHARTS' + index"></div>
  </div>
</template>
<script>
var echarts = require('echarts');
export default {
  components: {},
  data() {
    return {
      m_CHARTS: null,
      m_Option: null,
    };
  },
  filters: {
    nullVal: function (msg) {
      return msg ? msg : '-';
    },
  },
  //监听属性 类似于data概念
  computed: {
    Columns() {
      let align = 'center';
      let width = null;
      let columns = [
        {
          label: '操作',
          prop: 'action',
          align: align,
          width: width,
        },
      ];
      return columns;
    },
  },
  //监控data中的数据变化
  watch: {
    Prop: {
      immediate: false,
      deep: true,
      handler(val) {
        if (val) this.setOption();
      },
    },
  },
  //接收参数
  props: {
    index: {
      type: String,
      default: '',
    },
    Prop: {
      type: Object,
      default: null,
    },
    Type: {
      type: String,
      default: null,
    },
  },

  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.m_CHARTS = echarts.init(document.getElementById('m_CHARTS' + this.index));
    this.setOption();
    this.Comparison();
  },
  //方法集合
  methods: {
    setOption() {
      this.LoadOpt();
      this.m_CHARTS.setOption(this.m_Option, true);
    },
    //初始化
    Comparison() {
      setTimeout(() => {
        this.chartssize(document.getElementById('chartDiv' + this.index), document.getElementById('m_CHARTS' + this.index));
        this.m_CHARTS.resize();
        window.addEventListener('resize', res => {
          this.chartssize(document.getElementById('chartDiv' + this.index), document.getElementById('m_CHARTS' + this.index));
          this.m_CHARTS.resize();
        });
      }, 1000);
    },
    //设置echarts宽高为父容器宽高
    chartssize(container, charts) {
      if (!container && !charts) return;
      function getStyle(el, name) {
        if (window.getComputedStyle) {
          // console.log(el,charts)
          return window.getComputedStyle(el, null);
        } else {
          return el.currentStyle;
        }
      }
      let obj = getStyle(container);
      charts.style.height = obj.height;
    },

    LoadOpt() {
      if (this.Type == 'Pie') {
        //饼图模板
        this.m_Option = this.PieOpt();
      } else {
        //柱状图 条形图 折线图模板
        this.m_Option = this.Opt();
      }

      for (let key in this.Prop) {
        if (this.m_Option[key]) {
          this.SetData(this.Prop, this.m_Option, key);
        } else {
          this.m_Option[key] = this.Prop[key];
        }
      }
    },

    SetData(data, Optdata, key) {
      if (data[key] instanceof Array) {
        Optdata[key] = data[key];
        return;
      }
      if (data[key] && typeof data[key] === 'object') {
        for (let k in data[key]) {
          this.SetData(data[key], Optdata[key], k);
        }
      } else {
        Optdata[key] = data[key];
      }
    },
    PieOpt() {
      return {
        title: {
          top: '20',
          left: 'center',
          textStyle: {
            fontWeight: '400',
            fontSize: '16',
          },
        },
        tooltip: {
          trigger: 'item',
          position: [10, 10],
        },
        legend: {
          type: 'scroll',
          left: 'center',
          bottom: '10',
        },

        series: {
          center: ['50%', '50%'],
          radius: ['0%', '70%'],
          label: {
            show: false,
            position: 'center',
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '16',
              fontWeight: 'bold',
            },
          },
          labelLine: {
            show: false,
          },
          type: 'pie',

          avoidLabelOverlap: false,
        },
      };
    },
    Opt() {
      return {
        title: {
          top: '20',
          left: 'center',
          textStyle: {
            fontWeight: '400',
            fontSize: '16',
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {
          type: 'scroll',
          top: 'bottom',
          left: 'center',
        },
        grid: {
          top: '50',
          left: '5%',
          right: '5%',
          bottom: '30',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
        },
        yAxis: {
          type: 'value',
        },
        series: [],
      };
    },
    ChartsData(List, Legend) {
      let Data = {};
      let DataSorting = [];
      List.forEach(item => {
        if (DataSorting.indexOf(item[Legend['SortKey']]) == -1) {
          DataSorting.push(item[Legend['SortKey']]);
        }
      });
      this.$set(Data, Legend['SortKey'], DataSorting);
      for (let key in Legend) {
        if (key != 'SortKey') this.$set(Data, key, new Array(DataSorting.length).fill(0));
      }
      List.forEach(Item => {
        let index = DataSorting.findIndex(row => {
          return row == Item[Legend['SortKey']];
        });
        for (let key in Data) {
          if (key != Legend['SortKey']) Data[key].splice(index, 0, Item[key]); //添加到指定位置
        }
      });
      console.log(Data);
      return Data;
    },
  },
};
</script>
<style scoped>
.chartDiv {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.box-card {
  height: 100%;
  width: 100%;
}
/* @import url(); 引入css类 */
</style>
